<script setup lang='ts'>
import { onMounted } from 'vue';

//    定义接收props参数
// Vue 3.5+的版本的默认值用法

//    const {age = 10} = defineProps<{
//         name:string
//         age?:number
//     }>()
// vue 3.5以下的默认值的设置方式
const props = withDefaults(
    defineProps<{ name: string, age?: number, func?(count: number): void }>(),
    {
        name: "默认值",
        age: 30
    }
)
const test = () => {
    // 拿到的是最新传过来的数据
    console.log(props.name, props.age);
}
onMounted(() => {
    test()
})

// 子传父 自定义事件类型
const emits = defineEmits<{
    // key(事件名称):value(参数类型数组)
    "updateAge":[age:number]
    "updateName":[name:string]
    "updateAll" :[age:number,name:string]
}>()
// 实现子传父
const toParent =()=>{
    emits("updateAge",props.age-1)
}
const toParentName =()=>{
emits("updateName",props.name+"1")
}

</script>
       
<template>
    <div class="Child">
        <h2>子组件显示父组件传递过来的数据</h2>
        <p>接收的姓名：{{ name }}</p>
        <p>接收的年龄：{{ age }}</p>
        <button @click="props.func?.(age - 1)">子传父-回调函数形式</button>
        <button @click="toParent">子传父 改年龄 emits形式</button>
        <button @click="toParentName">子传父 该名称</button>
        <button @click="emits('updateAll',age+1,name+1)">子传父 改所有</button>
    </div>
</template>
       
<style scoped></style>